<template>
  <div>
    <div class="box clear">
      <div class="left fleft">
        <div class="top border">
          <div>
            <div class="text-box clear" style="margin-top:2vh;">
              <p class="fleft top_order">
                <strong>当前涉美订单总数</strong>
                <strong>{{tradeDataList.totalNum}}</strong>
                <strong>笔</strong>
              </p>
              <p class="fleft top_p">
                <span>在手订单</span>
                <span>{{tradeDataList.totalHandNum}}</span>
                <span>笔</span>
              </p>
              <p class="fleft top_p">
                <span>出货订单</span>
                <span>{{tradeDataList.totalDeliverNum}}</span>
                <span>笔</span>
              </p>
            </div>
            <div class="text-box clear">
              <p class="fleft top_order">
                <strong>本月涉美订单总数</strong>
                <strong>{{tradeDataList.monthNum}}</strong>
                <strong>笔</strong>
              </p>
              <p class="fleft top_p">
                <span>在手订单</span>
                <span>{{tradeDataList.monthHandNum}}</span>
                <span>笔</span>
              </p>
              <p class="fleft top_p">
                <span>出货订单</span>
                <span>{{tradeDataList.monthDeliverNum}}</span>
                <span>笔</span>
              </p>
            </div>
          </div>
        </div>
        <div class="bottom border">
          <transition name="el-zoom-in-center">
            <div v-if="bgData.length>0" v-show="tshow" class="clear tips">
              <div class="fleft num">{{orderObj.addr}}</div>
              <div class="fleft text">
                <span>企业 {{orderObj.comNum}} 家</span>
                <p style="text-align:left">订单总数{{orderObj.num}}笔</p>
                <p>出口金额{{(orderObj.money/10000).toFixed(4)}}万美元</p>
              </div>
            </div>
          </transition>
        </div>
      </div>
      <div class="right fright">
        <div class="top border">
          <div
            :style="{lineHeight:'50px',borderBottom:'1px solid #8c939d',fontWeight:'600',paddingLeft:'10px'}"
          >市辖区企业订单总数(总量排名)</div>
          <div style="height: 350px;margin-top:10px;" id="mix-line-bar"></div>
        </div>
        <div class="center border">
          <div
            :style="{lineHeight:'50px',borderBottom:'1px solid #8c939d',fontWeight:'600',paddingLeft:'10px'}"
          >涉美产品订单结构分析</div>
          <div style="height:250px;margin-top:10px;" id="pie_simple"></div>
        </div>
        <div class="bottom border">
          <div
            :style="{lineHeight:'50px',borderBottom:'1px solid #8c939d',fontWeight:'600',paddingLeft:'10px'}"
          >涉美订单价格走势</div>
          <div style="height:250px;margin-top:10px;" id="line_stack"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  tradeData,
  tradeBarData,
  tradeStackData,
  tradeSimpleData,
  tradebigData
} from "@/api/analysis";
export default {
  data() {
    return {
      tableData: [],
      tradeDataList: [],
      tradeBarDataList: [],
      tradeStackDataList: [],
      tradeSimpleDataList: [],
      bgData: [],
      orderObj: {},
      tshow: true
    };
  },
  mounted() {
    this.line_stack();
    this.mix_line_bar();
    this.pie_simple();
    this.getTradeData();
    this.tradebgData();
  },
  methods: {
    getTradeData() {
      tradeData().then(res => {
        if (res.code == 0) {
          this.tradeDataList = res.data;
        } else {
          this.$notify.error(res.msg);
        }
      });
    },
    tradebgData() {
      tradebigData()
        .then(res => {
          if (res.code == 0) {
            this.bgData = res.data;
            let arr = res.data;
            let timer = null;
            let num = 0;
            let that = this;
            let obj = {};
            obj.index = 1;
            obj.comNum = arr[0].companyNum;
            obj.money = arr[0].money;
            obj.addr = arr[0].title;
            obj.num = arr[0].num;
            that.orderObj = obj;
            clearInterval(timer);
            timer = setInterval(function() {
              num++;
              that.tshow = !that.tshow;
              setTimeout(function() {
                if (num == arr.length) {
                  num = 0;
                }
                let obj = {};
                obj.index = num + 1;
                obj.comNum = arr[num].companyNum;
                obj.money = arr[num].money;
                obj.addr = arr[num].title;
                obj.num = arr[num].num;
                that.orderObj = obj;
                that.tshow = !that.tshow;
              }, 200);
            }, 3000);
          } else {
            console.log(res.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    pie_simple() {
      tradeSimpleData().then(res => {
        if (res.code == 0) {
          let valList = [];
          let numList = [];
          res.data.forEach(el => {
            let dataList = {};
            numList.push(el.title);
            dataList.value = el.num;
            dataList.name = el.title;
            valList.push(dataList);
          });

          let myChart = this.$echarts.init(
            document.getElementById("pie_simple")
          );
          let option = {
            title: {
              // text: "涉美订单价格走势",
              // subtext: "（日统计-万美元）",
              x: "right"
            },
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b} : {c} 笔({d}%)"
            },
            legend: {
              // orient: "vertical",
              left: "left",
              data: numList
              // data: ["机电产品", "纺织服装", "高新技术产品", "农副产品", "文化产品"]
            },
            series: [
              {
                name: "访问来源",
                type: "pie",
                radius: "55%",
                center: ["50%", "60%"],
                data: valList,
                // data: [
                //   { value: 335, name: "机电产品" },
                //   { value: 310, name: "纺织服装" },
                //   { value: 234, name: "高新技术产品" },
                //   { value: 135, name: "农副产品" },
                //   { value: 1548, name: "文化产品" }
                // ],
                itemStyle: {
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)"
                  }
                }
              }
            ]
          };

          myChart.setOption(option);
        } else {
          this.$notify.error(res.msg);
        }
      });
    },
    line_stack() {
      tradeBarData().then(res => {
        if (res.code == 0) {
          let moneyData = [];
          let numData = [];
          let titleData = [];
          res.data.forEach(el => {
            moneyData.push((el.money / 10000).toFixed(4));
            numData.push(el.num);
            titleData.push(el.title);
          });

          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(
            document.getElementById("line_stack")
          );
          // 绘制图表
          let option = {
            title: {
              // text: '折线图堆叠'
            },
            tooltip: {
              trigger: "axis"
            },
            legend: {
              data: ["订单数（笔）", "金额（万美元）"]
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            // toolbox: {
            //   feature: {
            //     saveAsImage: {}
            //   }
            // },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: titleData
            },
            yAxis: {
              name: "万美元",
              type: "value"
            },
            series: [
              {
                name: "订单数（笔）",
                type: "line",
                stack: "总量",
                data: numData
              },
              {
                name: "金额（万美元）",
                type: "line",
                stack: "总量",
                data: moneyData
              }
            ]
          };

          myChart.setOption(option);
        } else {
          this.$notify.error(res.msg);
        }
      });
    },
    mix_line_bar() {
      tradeBarData().then(res => {
        if (res.code == 0) {
          let moneyData = [];
          let numData = [];
          let titleData = [];
          res.data.forEach(el => {
            moneyData.push((el.money/10000).toFixed(4));
            numData.push(el.num);
            titleData.push(el.title);
          });
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(
            document.getElementById("mix-line-bar")
          );
          // 绘制图表
          let option = {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                crossStyle: {
                  color: "#999"
                }
              }
            },
            legend: {
              data: ["订单金额（万美元）", "订单总数（笔）"]
            },
            xAxis: [
              {
                type: "category",
                data: titleData,

                axisPointer: {
                  type: "shadow"
                }
              }
            ],
            yAxis: [
              {
                type: "value",
                name: "万美元",
                min: 0,

                interval: 500,
                axisLabel: {
                  formatter: "{value}"
                }
              },
              {
                type: "value",
                name: "笔",
                min: 0,

                interval: 50,
                axisLabel: {
                  formatter: "{value}"
                }
              }
            ],
            series: [
              {
                name: "订单金额（万美元）",
                type: "bar",
                data: moneyData
              },
              {
                name: "订单总数（笔）",
                type: "line",
                yAxisIndex: 1,
                data: numData

              }
            ]
          };

          myChart.setOption(option);
        } else {
          this.$notify.error(res.msg);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.box {
  margin: 20px;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 20px;
  max-width: 1200px;
  .left {
    width: calc(100% - 420px);
    margin-right: 20px;
    .border {
      border: 1px solid #87b4e4;
      box-shadow: 0px 0px 10px #87b4e4;
      border-radius: 8px;
    }
    .top {
      height: 20vh;
      box-shadow: 0px 0px 10px #87b4e4;
      margin-bottom: 20px;
      // .top_order {
      //   width: 50%;
      //   font-weight: bold;
      // }
      .top_order {
        margin: 0;
        font-size: 14px;
        margin-top: 10px;
        box-sizing: border-box;
        width: 40%;
        text-align: center;
        // padding-left: 10px;
        & > :nth-child(2) {
          display: inline-block;
          text-align: center;
          width: 100px;
          font-size: 14px;
          color: blue;
        }
      }
      .top_p {
        width: 30%;
        // padding-left: 10px;
        // box-sizing: border-box;
        text-align: center;
        font-weight: 500;
        & > :nth-child(2) {
          display: inline-block;
          text-align: center;
          font-weight: 600;
          width: 60px;
          color: blue;
        }
      }
    }
    .bottom {
      min-height: calc(70vh + 20px);
      background: url("../../assets/gatt-chart-bg.png") no-repeat center;
      -webkit-background-size: cover;
      background-size: cover;
      position: relative;
    }
  }
  .right {
    width: 400px;

    .border {
      border: 1px solid #87b4e4;
      box-shadow: 0px 0px 10px #87b4e4;
      border-radius: 8px;
      .right_hand {
        display: flex;
        height: 30%;
        justify-content: space-around;
        border-top: 1px solid #333;
        font-size: 13px;
        font-weight: 600;
        padding: 10px;
      }
    }
    .top {
      /*height: 43vh;*/
    }
    .center {
      margin-top: 20px;
      margin-bottom: 20px;
      /*height: 30vh;*/
    }
    .bottom {
      position: relative;
      /*height: 42vh;*/
    }
  }
}

.tips {
  position: absolute;
  bottom: 50%;
  left: 50%;
  margin-left: -80px;
  .num {
    height: 106px;
    padding-left: 10px;
    padding-right: 10px;
    color: #fdfdfd;
    line-height: 106px;
    font-size: 30px;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    background: rgba(30, 106, 216, 0.2);
  }
  .text {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;

    span {
      display: inline-block;
      line-height: 30px;
      text-indent: 20px;
    }
    em {
      font-style: normal;
    }
    p {
      margin: 0;
      padding: 0;
      text-align: center;
      padding-right: 20px;
      padding-left: 20px;
    }
    height: 106px;
    color: #e3e3e3;
    background: rgba(238, 238, 238, 0.3);
  }
}

@import "@/styles/common.scss";
</style>